<template>
  <div class="sectionAnnularPie" ref="sectionAnnularPie"></div>
</template>

<script lang="ts">
export default {
  name: "sectionAnnularPie"
};
</script>

<script setup lang="ts">
import { ECharts } from "echarts";
import echarts from "/@/plugins/echarts";
import { onMounted, nextTick, ref, reactive } from "vue";
import { tryOnUnmounted, useTimeoutFn } from "@vueuse/core";
import { getAccTypeInfo } from "/@/api/dashboards";
import { storageLocal } from "/@/utils/storage";

import {
  addResizeListener,
  removeResizeListener
} from "element-plus/lib/utils/resize-event";

import { postProjectMngList } from "/@/api/project";
import { ClientRequest } from "http";

const sectionAnnularPie = ref<HTMLElement | null>(null) as any;

let echartInstance: ECharts;
let projectInfo = storageLocal.getItem("projectInfo");
let xAxisData = ref([]);
let accTypeInfoData = ref({});
let accTypeNo = ref([]);
let seriesData = ref([]);

let formInline = reactive({
  projectNameLike: "",
  projectRegionCode: "",
  projectFactoryCode: "",
  projectLeaderNameLike: "",
  projectTypeCode: "",
  projectYear: "",
  createTimeStrStart: "",
  createTimeStrEnd: "",
  pageNum: 1,
  pageSize: 10
});

function initechartInstance(seriesData?) {
  const echartDom = document.querySelector(".sectionAnnularPie");
  if (!echartDom) return;
  // @ts-ignore
  echartInstance = echarts.init(echartDom);
  echartInstance.clear(); //清除旧画布 重新渲染

  echartInstance.setOption({
    title: [
      //   {
      //     text: "71%",
      //     left: "8.25%",
      //     top: "36.5%",
      //     subtext: '开工验收',
      //     textStyle: {
      //       fontSize: 26,
      //       fontWeight: "normal",
      //       padding: 10
      //     },
      //     subtextStyle: {
      //       fontSize: 14,
      //       fontWeight: "normal",
      //       left: "1%"
      //     }
      // },
      {
        // text: "质量检查",
        // left: "center",
        top: "41.2%",
        textStyle: {
          fontSize: 18,
          fontWeight: 550,
          padding: 10
        }
      },
      {
        // text: "材料验收",
        // left: "27.7%",
        top: "41.3%",
        textStyle: {
          fontSize: 18,
          fontWeight: 550,
          padding: 10
        }
      },
      {
        // text: "隐蔽验收",
        // left: "47.7%",
        top: "41.3%",
        textStyle: {
          fontSize: 18,
          fontWeight: 550,
          padding: 10
        }
      },
      {
        // text: " 施工设施\n/见证检测",
        // left: "67.4%",
        top: "39%",
        textStyle: {
          fontSize: 18,
          fontWeight: 550,
          padding: 10
        }
      },
      {
        // text: "安全文明",
        // left: "87.7%",
        top: "41.2%",
        textStyle: {
          fontSize: 18,
          fontWeight: 550,
          padding: 10
        }
      }
    ],
    color: ["#5298ff", "#ffd765", "#85df00"],
    tooltip: {
      trigger: "item"
    },
    // series: seriesData
    series: [
      // {
      //     type: "pie",
      //     radius: ['35%','45%'],
      //     center: ['10.1%','46%'],
      //     avoidLabelOverlap: true,
      //     data: [
      //       { value: 300, name: "未完成" },
      //       { value: 154, name: "处理中" },
      //       { value: 150, name: "已完成" },
      //     ],
      //     emphasis: {
      //       itemStyle: {
      //         shadowBlur: 10,
      //         shadowOffsetX: 0,
      //         shadowColor: "rgba(0, 0, 0, 0.5)"

      //       }
      //     },
      //     label: {
      //       show: true,
      //       lineHeight: 20,
      //       formatter: "{b}, {c}\n{d}%"
      //     }
      //   },
      {
        type: "pie",
        radius: ["27%", "35%"],
        center: ["13%", "46%"],
        avoidLabelOverlap: true,
        data: seriesData["1"],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        label: {
          show: true,
          lineHeight: 20,
          formatter: "{b}\n{c}({d}%)"
        }
      },
      {
        type: "pie",
        radius: ["27%", "35%"],
        center: ["32%", "46%"],
        data: seriesData["2"],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        label: {
          show: true,
          lineHeight: 20,
          formatter: "{b}\n{c}({d}%)"
        }
      },
      {
        type: "pie",
        radius: ["27%", "35%"],
        center: ["51%", "46%"],
        data: seriesData["3"],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        label: {
          show: true,
          lineHeight: 20,
          formatter: "{b}\n{c}({d}%)"
        }
      },
      {
        type: "pie",
        radius: ["27%", "35%"],
        center: ["70%", "46%"],
        data: seriesData["4"],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        label: {
          show: true,
          lineHeight: 20,
          formatter: "{b}\n{c}({d}%)"
        }
      },
      {
        type: "pie",
        radius: ["27%", "35%"],
        center: ["89%", "46%"],
        data: seriesData["5"],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        },
        label: {
          show: true,
          lineHeight: 20,
          formatter: "{b}\n{c}({d}%)"
        }
      }
    ]
  });
}

// const initProjectNum = async () => {
//   try {
//     const { code, data } = await postProjectMngList(formInline);
//     if (code === 200) {
//       // xAxisData.value = data.xAxisData;
//       // const dataKey = Object.keys(data.multiSeriesData);
//       // seriesData.value = dataKey.map(item => {
//       //   return {
//       //     name: item,
//       //     data: data.multiSeriesData[item],
//       //     type: "line",
//       //     label: {
//       //       show: true
//       //     }
//       //   };
//       // });
//       nextTick(() => {
//         initechartInstance(xAxisData.value, seriesData.value);
//       });
//     }
//   } catch (err) {
//     console.log(err);
//   }
// };

// initProjectNum();

const getAccTypeData = async () => {
  try {
    const { data } = await getAccTypeInfo({ projectManageId: projectInfo.id });
    accTypeInfoData.value = data;
    let seriesData = {
      "1": [],
      "2": [],
      "3": [],
      "4": [],
      "5": []
    };

    data.forEach(item => {
      seriesData[item.accType] = [
        { value: item.noStartDoingComplete.noStartTotal, name: "未启动" },
        { value: item.noStartDoingComplete.doingTotal, name: "处理中" },
        { value: item.noStartDoingComplete.completeTotal, name: "已完成" }
      ];
    });
    // seriesData.value = [
    //    { value: 1, name: "未完成" },
    //    { value: 2, name: "处理中" },
    //    { value: 3, name: "已完成" }
    // ]
    nextTick(() => {
      initechartInstance(seriesData);
    });
  } catch (err) {
    console.log(err);
  }
};
getAccTypeData();

onMounted(() => {
  nextTick(() => {
    addResizeListener(sectionAnnularPie.value, resetRender);
  });
  // useEventListener("resize", () => {
  //   console.log("resize");
  //   if (!echartInstance) return;
  //   useTimeoutFn(() => {
  //     echartInstance.resize();
  //   }, 180);
  // });
});

const resetRender = () => {
  if (!echartInstance) return;
  useTimeoutFn(() => {
    echartInstance.resize();
  }, 180);
};

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
  removeResizeListener(sectionAnnularPie.value, resetRender);
});
</script>

<style lang="scss" scoped>
.sectionAnnularPie {
  width: 100%;
  height: 100%;
}
</style>
